<template>
  <div class="right_middle">
    <div class="visual_box">
      <div class="visual_title mt_n">
        电量消耗
      </div>
      <!-- <dv-conical-column-chart
        :config="config(config_energy)"
        style="margin-bottom: 10px;margin-top: -20px;"
        :style="[{ width: chartWidth }, { height: chartHeight }]"
      /> -->
      <div class="visual_table" :style="{ width: chartWidth }">
        <div class="visual_chart sfzcll">
          <a></a>
          <a>日电量（度）</a>
          <a>日单耗（度/吨）</a>
          <div class="sfzcll_pos_box">
            <div class="sfzcll_box">
              <img class="sfzcll_bkJk" src="../../../assets/img/point.png" />
              <img class="sfzcll_bkJk" src="../../../assets/img/point.png" />
              <img class="sfzcll_bkJk" src="../../../assets/img/point.png" />
              <img class="sfzcll_bkJk" src="../../../assets/img/point.png" />
              <label>一车间</label>
              <div class="sfzcll_smallBk">
                <div class="ygl"><span>{{ parseInt(electricityInfo.two_electricity) }}</span></div>
              </div>
              <div class="sfzcll_smallBk">
                <div class="ygh"><span>{{ electricityInfo.two_drain }}</span></div>
              </div>
              <div class="clear"></div>
            </div>
            <div class="sfzcll_box">
              <img class="sfzcll_bkJk" src="../../../assets/img/point.png" />
              <img class="sfzcll_bkJk" src="../../../assets/img/point.png" />
              <img class="sfzcll_bkJk" src="../../../assets/img/point.png" />
              <img class="sfzcll_bkJk" src="../../../assets/img/point.png" />
              <label>二车间</label>
              <div class="sfzcll_smallBk">
                <div class="ygl"><span>{{ parseInt(electricityInfo.three_electricity) }}</span></div>
              </div>
              <div class="sfzcll_smallBk">
                <div class="ygh"><span>{{ electricityInfo.three_drain }}</span></div>
              </div>
              <div class="clear"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import api from "@/api/api";
export default {
  props: {
    chartHeight: {
      type: [Number, String],
      default: "",
    },
    chartWidth: {
      type: [Number, String],
      default: "",
    },
    // config_energy: {
    //   type: Object,
    // },
	coladata:{
		type:Object,
	}
  },
  data() {
    return {
		electricityInfo:{
			three_drain:0,
            three_electricity:0,
            two_drain:0,
            two_electricity:0
		}
	};
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
		var _this = this;
    	setTimeout(() => {
      		_this.getData();
    	}, 360000);
      api.electricityInfo().then((res) => {
		this.electricityInfo = res.data
      });
    },
  },
};
</script>
<style>
.mt_n {
  margin-bottom: 0 !important;
}

.visual_table {
  float: left;
}
.visual_table .sfzcll {
  position: relative;
}
.visual_table .sfzcll a {
  width: 33%;
  text-align: center;
  line-height: 25px;
  color: #fff;
  display: inline-block;
}
.visual_table .sfzcll .sfzcll_pos_box {
  width: 100%;
  height: calc(100% - 30px);
}
.visual_table .sfzcll .sfzcll_box {
  width: 100%;
  height: calc(33% - 15px);
  line-height: 5;
  background: rgba(15, 47, 72, 0.8);
  border: 1px solid #1380bd;
  position: relative;
  margin-bottom: 15px;
}
.visual_table .sfzcll .sfzcll_box:last-of-type {
  margin: 0;
}
.visual_table .sfzcll .sfzcll_box .sfzcll_bkJk {
  position: absolute;
}
.visual_table .sfzcll .sfzcll_box .sfzcll_bkJk:first-of-type {
  top: -2px;
  left: -2px;
}
.visual_table .sfzcll .sfzcll_box .sfzcll_bkJk:nth-child(2) {
  top: -2px;
  right: -2px;
}
.visual_table .sfzcll .sfzcll_box .sfzcll_bkJk:nth-child(3) {
  bottom: -2px;
  right: -2px;
}
.visual_table .sfzcll .sfzcll_box .sfzcll_bkJk:nth-child(4) {
  bottom: -2px;
  left: -2px;
}
.visual_table .sfzcll .sfzcll_box label {
  width: 33%;
  color: #fff;
  text-align: center;
  float: left;
  line-height: 0.7rem;
  font-size: 0.2rem;
}
.visual_table .sfzcll .sfzcll_box label img {
  width: 23px;
  height: 23px;
  margin-right: 5px;
  margin-top: -2px;
}
.visual_table .sfzcll .sfzcll_box .sfzcll_smallBk {
  width: 33%;
  height: 100%;
  float: left;
  padding: 2px 5px;
  font-size: 0.25rem;
}
.visual_table .sfzcll .sfzcll_box .sfzcll_smallBk > div {
  /* height: 100%; */
  background: url(../../../assets/img/item-bg.png) no-repeat;
  background-size: 100% 100%;
  text-align: center;
  line-height: 0.6rem;
}
.visual_table .sfzcll .sfzcll_box .sfzcll_smallBk .ygl {
  color: #00ffc6;
}
.visual_table .sfzcll .sfzcll_box .sfzcll_smallBk .ygh {
  color: #ffe400;
}
.clear {
  clear: both;
}
</style>
